<template>
	<view class="container-white">
		<view class="head flex-box" v-if="topic != null">
			<view>
				<text v-if="topic.quesType == 1">单选题</text>
				<text v-if="topic.quesType == 2">多选题</text>
				<text v-if="topic.quesType == 3">判断题</text>
			</view>

			<view @click="collect" style="text-align: center;color: #333333;font-size: 22upx;margin-right: 20upx;">
				<image class="menu-icon" :src="topic.collect ? '../../static/icon/icon-collect-active.png' : '../../static/icon/icon-collect.png'" />
				<view>收藏</view>
			</view>
		</view>

		<view class="topic-box" v-if="topic != null">
			<!-- <rich-text v-if='topic.quesInfo' :nodes="topic.quesInfo" class="questions"></rich-text>
      <view v-if="topic.info">{{topic.info}}</view>-->
			<rich-text v-if="topic.info" :nodes="topic.info" class="questions"></rich-text>
			<view class="answer">
				<view class="options" v-for="(item, index) in topic.optionsBeans" :key="index" @click="checkOptions(index)">
					<view v-if="topic.quesType == 3" class="stide" :class="item.checked === true ? 'isCheck' : ''"></view>
					<view v-else class="stide" :class="item.checked === true ? 'isCheck' : ''">{{ item.key }}</view>
					<view style="flex:1">{{ item.option }}</view>
				</view>
			</view>
			<!-- <view hidden='true'>{{count}}</view> -->
		</view>

		<view class="footer" v-if="topic != null"><button type="primary" class="primary footer-btn" @click="submitTopic()">交卷并查看结果</button></view>
		<view v-if="topic == null" class="noData">暂无试题</view>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';
import { formatSeconds, setNavTitle } from '../../common/common';
var time = 0;
export default {
	data() {
		return {
			topic: {},
			examType: '',
			dailyId: '',
			type: null
		};
	},
	onLoad(options) {
		this.examType = options.examType;
		this.dailyId = options.id;
		this.length = options.length || false;
		this.getTopic();
		// #ifdef APP-PLUS
		setNavTitle('每日一题');
		// #endif
	},
	methods: {
		// 获取每日一题
		getTopic() {
			const params = {
				dailyId: this.dailyId,
				userId: uni.getStorageSync('userId')
			};
			post_md5('/exam-app/daily/answer/ques', params).then(res => {
				if (res.data != null) {
					this.topic = res.data;
					this.selectCollect();
				} else {
					this.topic = null;
				}
			});
		},

		// 提交每日一题
		submitTopic() {
			const params = {
				dailyAnswerId: this.dailyId,
				quesId: this.topic.id,
				type: this.topic.quesType,
				userId: uni.getStorageSync('userId')
			};
			params.answ =
				this.topic.optionsBeans
					.filter(x => x.checked)
					.map(x => x.key)
					.join('') || false;
			if (!params.answ) {
				uni.showToast({
					title: '请选择答案后提交',
					icon: 'none'
				});
				return false;
			}
			post_md5('/exam-app/daily/answer/submit', params).then(res => {
				uni.redirectTo({
					url: './dailyInfo' + `?isRight=${res.data}&id=${this.topic.id}&dailyAnswerId=${this.dailyId}`
				});
			});
		},

		// 选择选项
		checkOptions(index) {
			let { optionsBeans } = this.topic;
			if (this.topic.quesType === 2) {
				optionsBeans[index].checked = !optionsBeans[index].checked;
			} else {
				optionsBeans.forEach(x => (x.checked = false));
				optionsBeans[index].checked = true;
			}
		},

		// 查询收藏信息
		selectCollect() {
			const params = {
				examType: this.examType,
				type: 3,
				userId: uni.getStorageSync('userId'),
				idInfo: this.topic.id
			};
			post_md5('/usercenter-app/collect/iscollect', params, false).then(res => {
				if (res.data == -1) {
					this.topic.collect = false;
					this.$forceUpdate();
				} else {
					this.topic.collect = res.data;
					this.$forceUpdate();
				}
			});
		},

		// 收藏
		collect() {
			if (this.topic.collect) {
				const params = {
					id: this.topic.collect
				};
				post_md5('/usercenter-app/collect/cancelcollect', params, false).then(res => {
					this.topic.collect = false;
					this.$forceUpdate();
					uni.showToast(
						{
							title: '取消收藏',
							icon: 'none'
						},
						500
					);
				});
			} else {
				const params = {
					examType: this.examType,
					type: 3,
					userId: uni.getStorageSync('userId'),
					idInfo: this.topic.id
				};
				post_md5('/usercenter-app/collect/collectInfo', params, false).then(res => {
					this.topic.collect = res.data;
					this.$forceUpdate();
					uni.showToast(
						{
							title: '收藏成功',
							icon: 'none'
						},
						500
					);
				});
			}
		}
	}
};
</script>

<style>
.head {
	padding: 15upx 20upx;
}

.menu {
	display: flex;
	font-size: 22upx;
	font-weight: 400;
	color: #333333;
	padding: 10upx 100upx;
	margin: 1px 0;
	border-bottom: 1px solid #ededed;
	text-align: center;
}

.menu-icon {
	width: 42upx;
	height: 42upx;
}

.topic-box {
	padding: 20upx;
	font-size: 28upx;
	font-weight: normal;
	color: #333333;
	line-height: 60upx;
}

.footer {
	height: 98upx;
	font-size: 28upx;
	background: #02a8f4;
}
</style>

<style scoped>
.isCheck {
	background: #02a8f4;
	color: #ffffff;
}
.noData {
	font-size: 35upx;
	color: #ededed;
	text-align: center;
	line-height: 500upx;
}
</style>
